<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现案例</title>
	</head>
	<body>
		<div id="app">
			<div align="center">
				<div>
					<h3>用户查询</h3>
					用户名称: <input type="text" name="name" v-model="queryUser.name"/>
					用户年龄: <input type="text" name="age" v-model="queryUser.age"/>
					用户性别: <input type="text" name="sex" v-model="queryUser.sex"/>
					<button @click="findComit">查询</button>
				</div>
				<hr />
				<div></div>
				<h3 align="center">用户新增</h3><br>
				<p>
					<!-- 看到input框	第一时间想到双向数据绑定 -->
					用户名称: <input type="text" name="name" v-model="addUser.name"/>
					用户年龄: <input type="text" name="age" v-model="addUser.age"/>
					用户性别: <input type="text" name="sex" v-model="addUser.sex"/>
					<button @click="addUserBTN">新增</button>
				</p>
			</div>
			<hr />
			<div align="center">
				<h3 align="center">用户修改操作</h3><br>
				<p>
						用户ID号: <input type="text" name="id" v-model="updateUser.id" disabled/>
						用户名称: <input type="text" name="name" v-model="updateUser.name"/>
						用户年龄: <input type="text" name="age" v-model="updateUser.age"/>
						用户性别: <input type="text" name="sex" v-model="updateUser.sex"/>
						<button @click="updateCommit">修改</button>
				</p>
			</div>
			<h1 align="center">用户列表展现案例</h1>
			<table align="center" border="1px" width="80%">
				<tr align="center">
					<td>ID编号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name" ></td>
					<td v-text="user.age" ></td>
					<td v-text="user.sex" ></td>
					<td>
						<button @click="updateBTN(user)">修改</button>
						<button @click="deleteUserBTN(user)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			//为axios执行前缀
			axios.defaults.baseURL="http://localhost:8090"

			const app = new Vue({
				el: "#app",
				data: {
					//指定新增对象
					addUser:{
						name: "",
						age: "",
						sex: ""
					},
					deleteUser:{
						name: "",
						age: "",
						sex: ""
					},
					updateUser: {
						id: " ",
						name: "",
						age: "",
						sex: ""
					},
					queryUser:{
						name: "",
						age: "",
						sex: ""
					},
					//3.定义数据列表
					userList: []
				},
				methods: {
					//2.定义获取列表数据的函数
					async getUserList(){
						//解构赋值，固定写法
						let {data: result} = await axios.get("/axios/findUser")
						console.log(result)
						//将ajax返回值传递给Vue
						this.userList = result
					},
					async addUserBTN(){
						let {data: result}=await axios.post("/axios/saveUser",this.addUser)
						alert(result)
						//清空原有数据
						this.addUser={}
						//新增成功应重新获取列表信息
						this.getUserList()
					},
					async deleteUserBTN(user){
						this.deleteUser=user
						let {data: result}=await axios.post("/axios/deleteUser",this.deleteUser)
						alert(result)
						this.getUserList()
					},
					updateBTN(user){
						this.updateUser=user
					},
					async updateCommit(){
						let {data: result}=await axios.put("/axios/updateUser",this.updateUser)
						alert(result)
						this.updateUser={}
						this.getUserList()
					},
					async findComit(){
						let {data:result}=await axios.post("/axios/findSome",this.queryUser)
						this.userList=result
						this.queryUser={}
					}
				},
				mounted(){
					//1利用生命周期函数调用getUser函数
					this.getUserList()
				}
			})
		</script>
	</body>
</html>